Ext.onReady(function(){

/////////////////Ext core ////////////////////////

///////////////////Ext widget////////////////
	//grid
	var myData=[
		["Apple",29.89,0.24,0.81,"9/6 12:00am"],
		["Ext",83.81,0.28,0.34,"9/2 12:00am"],
		["Google",71.72,0.02,0.03,"10/1 12:00am"],
		["Microsoft",52.55,0.01,0.02,"7/4 12:00am"],
		["Yahoo!",29.01,0.42,1.47,"5/22 12:00am"]
	];	
	var ds=new Ext.data.Store({
		proxy:new Ext.data.MemoryProxy(myData),
		reader:new Ext.data.ArrayReader({id:0},[
			{name:'company'},
			{name:'price',type:'float'},
			{name:'change',type:'float'},
			{name:'pctChange',type:'float'},
			{name:'lastChange',type:'date',dateFormat:'n/j h:ia'}
		])
		
	});

	ds.load();
	var colModel=new Ext.grid.ColumnModel([
		{header:"Company",width:120,sortable:true,dataIndex:'company'},
		{header:'Price',width:90,sortable:true,dataIndex:'price'},
		{header:'Change',width:90,sortable:true,dataIndex:'change'},
		{header:'% Change',width:90,sortable:true,dataIndex:'pctChange'},
		{header:'Last Updated',width:120,sortable:true,
			renderer:Ext.util.Format.dateRenderer('m/d/Y'),
			dataIndex:'lastChange'}
	]);
	var grid=new Ext.grid.GridPanel({
			el:'grid-example',
			ds:ds,cm:colModel,
			viewConfig:{
				forceFit:true
			},
			width:600,
			height:600
			});
	grid.render();
	grid.getSelectionModel().selectFirstRow();
	Ext.get('grid-example').show();
	
});
